<template>
	<div ref="fullscreenElement">
		<div class="header">
		  <h3>处理异常答题卡</h3>
		  <div class="routerlistbox">
		    <router-link to="/abnormalexamnumber" active-class="hover">答题卡异常</router-link>
		    <router-link to="/optionexception" active-class="hover">填涂异常</router-link>
			<router-link to="/abnormalrating" active-class="hover">打分异常</router-link>
		  </div>
		  <p>
		     <b @click="toggleFullscreen"><img src="../../assets/image/school/qp.png" alt="">{{ isFullscreen ? "退出全屏" : "全屏(F11)" }}</b>
		    <em @click="$router.push('/identificationrecord')">退出</em>
		  </p>
		</div>
		<div class="cropperBox">
			 <div class="cropperImageset">
				 <div class="cardczpk" ref="draggableBox"
				 			:style="{
				 			  left: `${position.x}px`,
				 			  top: `${position.y}px`,
				 			}"
				 			@mousedown="startDrag"
				 			@touchstart.prevent="startDrag">
				 			 <span>答题卡操作</span>
				 			 <div>
				 				 <i @click="roateclick">旋转</i>
				 				 <b @click="cardabsore=true">排序</b>
				 			 </div>
				 </div>
				<div class="image-wrapper">
					<img :src="currentImage.filePath" alt="">
				</div>
				<ul class="pagesetfixed">
					<li v-for="(item,index) in imageUrllist" :class="index==tabindex?'hover':''" @click="pageimageclick(index)">{{index+1}}</li>
				</ul>
			 </div>
			 <div class="uploadcardInfo">
				 <h3>异常列表({{numbersl.examNoExceptionCount}})</h3>
				 <div class="yclbtitleLeft">
				 	<el-input clearable placeholder="准考证号" v-model="examNumber"></el-input>
				 	<el-input clearable placeholder="考生姓名" v-model="studentName"></el-input>
				 	<el-button @click="searchbutton">搜索</el-button>
				 </div>
				 <div style="padding:0 15px;">
					 <el-table
					     ref="multipleTable"
					     :data="examycnumber"
					     tooltip-effect="dark"
					     style="width: 100%;"
					 	class="custom-table"
						:height="tableheight"
						@row-click="handleRowClick"
					     @selection-change="handleSelectionChange"
						 @current-change="handleCurrentChange"
						 row-key="id">
					     <el-table-column
					       type="selection"
					       width="55">
					     </el-table-column>
					     <el-table-column
					       label="批次">
					       <template slot-scope="scope">{{ scope.row.batchNumber }}</template>
					     </el-table-column>
					     <el-table-column
					       prop="serialNumber"
					       label="流水号">
					     </el-table-column>
					     <el-table-column
					       prop="examNumber"
					       label="准考证号">
					     </el-table-column>
						 <el-table-column
						   prop="examName"
						   label="姓名">
						 </el-table-column>
						 <el-table-column
						   label="缺考">
						   <template slot-scope="scope">{{ scope.row.missingExam?'是':'否' }}</template>
						 </el-table-column>
						 <el-table-column
						   label="状态">
						   <template slot-scope="scope">
							   <span v-for="yclist in scope.row.recognizeErrorCodes">{{ yclist===1000?'试卷异常':yclist===1100?'定位点识别异常':yclist===2000?'未知准考证号':yclist===2100?'无对应考生':yclist===2200?'重复试卷':yclist===3000?'缺考':yclist===4000?'单选多个答案':yclist===4100?'缺少选项':yclist===6000?'打分异常':'选科异常'}} | </span>
						   </template>
						 </el-table-column>
					 </el-table>
				 </div>
				 <div class="yclbtitleRight">
				 	<el-button @click="translatedata">刷新</el-button>
				 	<el-button @click="dacdeletmore">批量删除</el-button>
				 	<el-button @click="mandatoryidentification">强制识别</el-button>
				 	<el-button @click="batchrecognition">批量识别</el-button>
				 </div>
				 <h3 style="border:none;border-top:solid 1px #D8E4F0;margin-top:25px">考号核对绑定</h3>
				 <div class="yclbtitleLeft" style="padding-top:0;">
					<div>
						<el-input clearable placeholder="准考证号" v-model="examNumber1"></el-input>
						<el-input clearable placeholder="考生姓名" v-model="studentName1"></el-input>
					</div>
					<div>
						<el-button @click="searchboxexam">搜索</el-button>
						<el-button style="width:110px;" @click="suresubmit">确认并提交</el-button>
					</div>
				 </div>
				<div>
					 <div style="padding:0 15px;">
						 <el-table
							 ref="multipleTable1"
							 :data="examlist"
							 tooltip-effect="dark"
							 style="width: 100%;"
								class="custom-table"
								highlight-current-row
								:height="tableheight1"
								@row-click="handleRowClickexam"
								:row-key="(row) => row.id"
								>
							 <el-table-column
							   label="姓名">
							   <template slot-scope="scope">{{ scope.row.name }}</template>
							 </el-table-column>
							 <el-table-column
							   prop="examNumber"
							   label="准考证号">
							 </el-table-column>
							 <el-table-column
							   prop="examRoomNumber"
							   label="考场号">
							 </el-table-column>
							 <el-table-column
							   prop="seatNumber"
							   label="座位号">
							 </el-table-column>
							 <el-table-column
							   prop="className"
							   label="班级">
							 </el-table-column>
							 <el-table-column
							   label="选科方向">
							   <template slot-scope="scope"><span v-for="item in scope.row.courses">{{item.coursesName}}</span></template>
							 </el-table-column>
							 <el-table-column
							   label="小语种">
							   <template slot-scope="scope"><span v-for="item in scope.row.languages">{{item.coursesName}}</span></template>
							 </el-table-column>
						 </el-table>
					 </div>
				 </div>
			 </div>
		</div>
		<!-- 排序 -->
		<div class="uploadcadContent" v-if="cardabsore">
			<div class="uploadcad">
				<h3>答题卡操作-排序</h3>
				<draggable v-if="imageUrllist.length>0" :list="imageUrllist" :animation="100" :forceFallback="true"  @end="onEnd" @change="onMoveCallback" class="imgmove">
				     <transition-group>
				       <div v-for="(item, index) in imageUrllist" :key="item.id" class="boxsetdelecte" v-if="imageUrllist.length > 0">
							<b>{{index+1}}</b>
				         <img :src="item.filePath" alt="" style="width:198px;border: 1px solid #295cff80;">
						 <span><img src="../../assets/image/school/drag.png" alt="" style="width:24px;height:24px;"></span>
						 <div class="buttonboxedit">
							 <i @click="showViewer(index)">查看</i>
						 </div>
				       </div>
				     </transition-group>
				   </draggable>
				   <div class="buttonreupload" style="margin-top:20px;">
				   	<button @click="surepxlist">保存</button>
				   	<b @click="cardabsore=false">返回</b>
				   </div>
			</div>
		</div>
		<viewer
		 class="viewer"
		 ref="viewer"
		 :images="imageUrllist"
		 :shown="viewerVisible"
		 @inited="viewerInited"
		>
		 <template #default="{ images }">
		   <img
			 v-for="(image, index) in images"
			 :key="index"
			 :src="image.filePath"
			 style="display: none;"
		   >
		 </template>
		</viewer>
		<!-- 批量识别答题卡 -->
		<div class="addExamMain" v-if="batchrecognitionishow">
			<div class="addExamContent">
				<h3>批量识别答题卡</h3>
				<p>批量识别将覆盖现有识别记录，请选择以下重新批量识别选项</p>
				<div class="sbcontentbsl">
					<el-checkbox v-model="isExamNo">准考证号</el-checkbox>
					<el-checkbox v-model="isMissExam">缺考标记</el-checkbox>
					<el-checkbox v-model="isOption">客观题</el-checkbox>
				</div>
				<div class="sbjdprogreen">
					识别进度
					<el-progress :percentage="totalNumber"></el-progress>
				</div>
				<div class="groupbutton">
					<el-button type="primary" @click="batchsurebc">开始识别</el-button>
					<el-button type="primary" @click="batchgoback">取消</el-button>
				</div>
			</div>
		</div>
		<!-- 强制识别答题卡 -->
		<div class="addExamMain" v-if="mandatoryidentificationishow">
			<div class="addExamContent">
				<h3>强制识别答题卡</h3>
				<p>强制识别后智能批改数据将被强制清空！</p>
				<div class="sbcontentbsl">
					强制识别数量  <span>{{this.multipleSelection.length}}</span>
				</div>
				<div class="sbjdprogreen">
					识别进度
					<el-progress :percentage="qzshibNumber"></el-progress>
				</div>
				<div class="groupbutton">
					<el-button type="primary" @click="mandatorysure">强制识别</el-button>
					<el-button type="primary" @click="Mandatorygoback">取消</el-button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {get,post,del,dele} from '../../request/api.js'
	import draggable from 'vuedraggable';
export default {
  data() {
    return {
		  multipleSelection: [],
		  imageUrllist:[],
		  tabindex:0,
		  examNumber:'',
		  studentName:'',
		  examNumber1:'',
		  studentName1:'',
		  examycnumber:[],
		  examlist:[],
		  currentImage:'',
		  cardabsore:false,
		  viewerVisible: false, // 控制查看器的显示状态
		  viewerIndex: 0, // 当前查看的图片索引
		  currentRow: null,
		  examkhhdlist:{},
		  rowpaperId:0,
		  numbersl:{},
		  batchrecognitionishow:false,
		  mandatoryidentificationishow:false,
		  isExamNo:true,
		  isMissExam:false,
		  isOption:false,
		  totalNumber:0,
		  qzshibNumber:0,
		  timer:null,
		  timer1:null,
		  timer2:null,
		  position: { x: 24, y: 72 },
		  startPos: { x: 0, y: 0 },
		  isDragging: false,
		  isFullscreen: false, // 当前是否处于全屏状态
    }
  },
  mounted() {
	  // 监听全屏状态变化
	  document.onfullscreenchange = this.handleFullscreenChange;
	  this.examobjcontent = JSON.parse(sessionStorage.getItem('examInfo'))
	  this.tableheight = window.innerHeight - 600
	  this.tableheight1 = window.innerHeight - 700
	  this.yclistbox()
	  this.examlistclick()
	  this.getdatanum()
  },
  methods: {
	  //刷新
	  translatedata(){
		  this.yclistbox()
		  this.examlistclick()
	  },
	  //强制识别
	  mandatoryidentification(){
	  		  this.mandatoryidentificationishow = true
	  },
	  mandatorysure(){
		 if (this.multipleSelection.length > 0) {
		   let ids = this.multipleSelection.map(item => item.id);
		 	  
		   // 强制识别提示
		   this.$message.warning('正在进行批量识别操作，请稍候...');
		 	  
		   // 循环调用接口
		   ids.forEach((id, index) => {
		     let obj = {
		       paperId:id, // 每次只传一个 id
		     };
		 	  
		     get('/scanpaperexception/forceidentify', obj)
		       .then(res => {
		         if (res.code == 200) {
		           // 处理成功逻辑
		           this.$message({
		             type: 'success',
		             message: `批量识别成功！（${index + 1}/${ids.length}）`
		           });
		 			this.totalNumber = index + 1
		           // 如果所有 ID 都处理完成，调用 yclistbox 方法
		           if (index === ids.length - 1) {
		            const timer = setTimeout(()=>{
						 this.yclistbox();
					},500)
		             this.$message({
		               type: 'success',
		               message: '所有批量识别操作已完成！'
		             });
					 this.mandatoryidentificationishow = false
		           }
		         } else {
		           // 处理失败逻辑
		           this.$message.error(res.message || `批量识别失败，请检查数据后重试！（${index + 1}/${ids.length}）`);
		         }
		       })
		       .catch(error => {
		         // 处理异常
		         this.$message.error(`批量识别过程中发生错误：${error.message}（${index + 1}/${ids.length}）`);
		       });
		   });
		 } else {
		   this.$message({
		     type: 'warning',
		     message: '没有选中内容，无法进行批量识别操作！'
		   });
		 }
	  },
	  Mandatorygoback(){
		this.mandatoryidentificationishow = false  
	  },
	  // 批量识别
	  batchrecognition(){
	  	this.batchrecognitionishow = true
	  },
	  batchsurebc() {
	    if (this.multipleSelection.length > 0) {
	      let ids = this.multipleSelection.map(item => item.id);
	  
	      // 强制识别提示
	      this.$message.warning('正在进行批量识别操作，请稍候...');
	  
	      // 循环调用接口
	      ids.forEach((id, index) => {
	        let obj = {
	          paperId:id, // 每次只传一个 id
	          isExamNo: this.isExamNo,
	          isMissExam: this.isMissExam,
	          isOption: this.isOption
	        };
	  
	        post('/scanpaperexception/batchidentify', obj)
	          .then(res => {
	            if (res.code == 200) {
	              // 处理成功逻辑
	              this.$message({
	                type: 'success',
	                message: `批量识别成功！（${index + 1}/${ids.length}）`,
					  offset:60
	              });
					this.totalNumber = index + 1
	              // 如果所有 ID 都处理完成，调用 yclistbox 方法
	              if (index === ids.length - 1) {
	               const timer1 = setTimeout(()=>{
	               	 this.yclistbox();
	               },500)
	                this.$message({
	                  type: 'success',
	                  message: '所有批量识别操作已完成！',
					  offset:60
	                });
	                this.batchrecognitionishow = false;
	              }
	            } else {
	              // 处理失败逻辑
	              this.$message.error(res.message || `批量识别失败，请检查数据后重试！（${index + 1}/${ids.length}）`);
	            }
	          })
	          .catch(error => {
	            // 处理异常
	            this.$message.error(`批量识别过程中发生错误：${error.message}（${index + 1}/${ids.length}）`);
	          });
	      });
	    } else {
	      this.$message({
	        type: 'warning',
	        message: '没有选中内容，无法进行批量识别操作！',
			offset:60
	      });
	    }
	  },
	  batchgoback(){
		  this.batchrecognitionishow = false
	  },
	  getdatanum(){
	  		let obj={
	  			examCourseId:this.examobjcontent.id
	  		}
	  		get('/scanpaperexception/exception',obj)
	  		.then(res=>{
	  			//console.info(res)
	  			if(res.code==200){
	  				this.numbersl = res.data
	  			}else{
	  				this.$message.error(res.message);
	  			}
	  		})
	  },
	  showViewer(index) {
	        // 显示查看器并跳转到指定图片
	        this.$viewer.view(index);
	      },
	      viewerInited(viewer) {
	        // 在 viewer 初始化后，可以通过 this.$viewer 访问 viewer 实例
	        this.$viewer = viewer;
	      },
	  // 异常列表
	  yclistbox(){
		  let obj={
			  examCourseId:this.examobjcontent.id,
			  examNo:this.examNumber,
			  studentName:this.studentName
		  }
		  get('/scanpaperexception/examnoexception',obj)
		  .then(res=>{
			  //console.info(res)
			  if(res.code==200){
				 this.examycnumber = res.data
				 this.imageUrllist = res.data[0].paperImages
				 this.currentImage = res.data[0].paperImages[0]
				  this.multipleSelection = [this.examycnumber[0]];
				  this.rowpaperId = this.examycnumber[0].id
				  //  this.$nextTick(() => {
					 // this.$refs.multipleTable.toggleRowSelection(this.examycnumber[0], true);
				  //  });
			  }else{
				  // this.$message.error(res.message);
				  this.$message({
				    type: 'warning',
				    message: '当前没有可处理的异常',
				  	offset:60
				  });
				  const timer2 = setTimeout(()=>{
				  	this.$router.push('/identificationrecord')
				  },5000)
			  }
		  })
	  },
	  //考号核对列表
	  examlistclick(){
		  let obj={
			  examCourseId:this.examobjcontent.id,
			  examNo:this.examNumber1,
			  studentName:this.studentName1
		  }
		  get('/scanpaperexception/examnocheck',obj)
		  .then(res=>{
			  //console.info(res)
			  if(res.code==200){
				 this.examlist = res.data
			  }else{
				  this.$message({
				    type: 'error',
				    message: res.message,
				  	offset:60
				  });
			  }
		  })
	  },
	  handleRowClick(row,column,enent){
		this.rowpaperId = row.id
		this.imageUrllist = row.paperImages
		this.currentImage = row.paperImages[0]
		this.tabindex = 0
		// 获取当前选中的行数据
		// const table = this.$refs.multipleTable;
		// const isSelected = table.selection.some(item => item.id === row.id);
		// this.$nextTick(() => {
		//   this.$refs.multipleTable.toggleRowSelection(row, !isSelected);
		// });
	  },
	  handleRowClickexam(row,column,enent){
		this.examkhhdlist = row
	  },
	  searchbutton(){
		  this.yclistbox()
	  },
	  searchboxexam(){
		 this.examlistclick() 
	  },
	  handleSelectionChange(val) {
		  this.multipleSelection = val;
		  if(!val){
			 this.rowpaperId = val[0].id 
		  }
		},
		pageimageclick(num){
			this.tabindex = num
			this.currentImage = this.imageUrllist[num]
		},
		//保存排序
		surepxlist(){
			const result = this.imageUrllist.map((item, index) => {
				return {
				  id: item.id,
				  page: index + 1
				};
			});
			let obj={
				paperId:this.rowpaperId,
				paperImages:result
			}
			post('/scanpaperexception/papersort',obj)
			.then(res=>{
				//console.info(res)
				if(res.code==200){
					this.yclistbox()
					this.cardabsore =false
				}else{
					this.$message({
					  type: 'error',
					  message: res.message,
						offset:60
					});
				}
			})
		},
		// 旋转
		roateclick(){
			const loading = this.$loading({
			  lock: true,
			  text: '旋转中...',
			  spinner: 'el-icon-loading',
			  background: 'rgba(0, 0, 0, 0.7)'
			});
			let obj={
				paperId:this.rowpaperId,
				angleInDegrees:90
			}
			get('/scanpaperexception/rotate',obj)
			.then(res=>{
				//console.info(res)
				if(res.code==200){
					loading.close();
					// this.$message.success('旋转成功')
					 // 移除旧的时间戳
					const filePath = this.imageUrllist[this.tabindex].filePath.replace(/\?timesDate=\d+/, '');
					// 添加新的时间戳
					this.imageUrllist[this.tabindex].filePath = `${filePath}?timesDate=${new Date().getTime()}`;
					this.yclistbox()
					this.cardabsore=false
					let valuesToCheck = [5000, 1000, 1100, 2000, 2100, 2200];
					// 找到 data 中包含的 valuesToCheck 中的值
					let matchedValues = valuesToCheck.filter(value => res.data.includes(value));
					// 定义异常信息映射
					const errorMessages = {
					  1000: "试卷异常",
					  1100: "定位点识别异常",
					  2000: "未知考号异常",
					  2100: "无对应考生",
					  2200: "重复试卷"
					  // 可以根据需要继续扩展
					};
					// 定义状态码映射
					const statusCodes = {
					  success: "识别成功",
					  failure: (matchedValues) => {
					    // 只处理 valuesToCheck 中的值
					    const messages = matchedValues
					      .filter(value => valuesToCheck.includes(value)) // 确保只处理 valuesToCheck 中的值
					      .map(value => errorMessages[value] || `未知异常（值：${value}）`);
					    return `（包含以下异常：\n${messages.join("\n")})`;
					  }
					};	
					// 根据 matchedValues 的长度显示对应的状态码标识
					if (matchedValues.length > 0) {
						loading.close();
					  this.$message({
					    type: 'error',
					    message: statusCodes.failure(matchedValues),
					  	offset:60
					  });
					} else {
					  this.$message({
					    type: 'success',
					    message: statusCodes.success,
					  	offset:60
					  });
					}
					// this.imageUrllist[this.tabindex].filePath = this.imageUrllist[this.tabindex].filePath+`?timestamp=${new Date().getTime()}`;
				}else{
					loading.close();
					this.$message({
					  type: 'error',
					  message:res.message,
						offset:60
					});
				}
			})
		},
		handleCurrentChange(val) {
			this.currentRow = val;
		},
		suresubmit(){
			//console.info(this.examkhhdlist) 
			if(this.examkhhdlist && this.examkhhdlist.id&&this.rowpaperId){
				let obj={
					paperId:this.rowpaperId,
					studentId:this.examkhhdlist.id
				}
				get('/scanpaperexception/examnoconfirm',obj)
				.then(res=>{
					if(res.code==200){
						this.yclistbox()
						this.examlistclick()
						this.getdatanum()
						this.$message({
						  type: 'success',
						  message:'绑定成功',
							offset:60
						});
					}else{
						this.$message({
						  type: 'error',
						  message:res.message,
							offset:60
						});
					}
				})
			}else{
				this.$message.error('请选择考号核对内需要绑定的学生')
			}
		},
		//批量删除
		dacdeletmore(){
			//console.info(this.multipleSelection.length)
			if(this.multipleSelection.length>0){
				let ids = this.multipleSelection.map(item => item.id)
				this.$confirm('选中的答题卡图像和识别结果将彻底删除，确定要删除选中的答题卡吗？', '删除答题卡', {
					  confirmButtonText: '确定',
					  cancelButtonText: '取消',
					  type: 'warning'
					}).then(() => {
						post('/scanpaperexception/delexception',ids)
						.then(res=>{
							if(res.code==200){
								this.$message({
									type: 'success',
									message: '删除成功!',
									offset:60
								});
								this.yclistbox()
							}else{
								this.$message({
								  type: 'error',
								  message:res.message,
									offset:60
								});
							}
						})
						.catch(error=>{
							this.$message({
							  type: 'error',
							  message:res.message,
								offset:60
							});
						})
					  
					}).catch(() => {
					  this.$message({
						type: 'info',
						message: '已取消删除',
						offset:60
					  });          
				});
			}else{
				this.$message({
				  type: 'warning',
				  message:'请先选择要删除的内容',
				  offset:60
				});
			}
		},
		startDrag(event) {
		  event = event.type === 'touchstart' ? event.touches[0] : event;
		  
		  this.startPos = {
		    x: event.clientX - this.position.x,
		    y: event.clientY - this.position.y,
		  };
		  
		  this.isDragging = true;
		  
		  // 添加事件监听
		  document.addEventListener('mousemove', this.onDrag);
		  document.addEventListener('mouseup', this.stopDrag);
		  document.addEventListener('touchmove', this.onDrag);
		  document.addEventListener('touchend', this.stopDrag);
		},
		onDrag(event) {
		  if (!this.isDragging) return;
		  event.preventDefault();
		  
		  event = event.type === 'touchmove' ? event.touches[0] : event;
		  
		  this.position = {
		    x: event.clientX - this.startPos.x,
		    y: event.clientY - this.startPos.y,
		  };
		},
		stopDrag() {
		  this.isDragging = false;
		  
		  // 移除事件监听
		  document.removeEventListener('mousemove', this.onDrag);
		  document.removeEventListener('mouseup', this.stopDrag);
		  document.removeEventListener('touchmove', this.onDrag);
		  document.removeEventListener('touchend', this.stopDrag);
		},
		// 切换全屏
		toggleFullscreen() {
		  if (!document.fullscreenEnabled) {
		    alert("您的浏览器不支持全屏功能！");
		    return;
		  }
		
		  if (this.isFullscreen) {
		    // 退出全屏
		    document.exitFullscreen();
			this.$refs.fullscreenElement.style.overflow = 'auto';
		  } else {
		    // 进入全屏
		    this.$refs.fullscreenElement.requestFullscreen();
			this.$refs.fullscreenElement.style.overflow = 'auto';
		  }
		},
		// 处理全屏状态变化
		handleFullscreenChange() {
		  this.isFullscreen = !!document.fullscreenElement;
		}
  },
  components: {
    draggable
  },
  beforeDestroy() {
      // 清除定时器
      clearTimeout(this.timer);
  	   clearTimeout(this.timer1);
  	   clearTimeout(this.timer2);
	   // 组件销毁时移除监听
	   this.stopDrag();
    },
	beforeRouteLeave(to, from, next) {
			 // 清除定时器
			 clearTimeout(this.timer);
			 clearTimeout(this.timer1);
			 clearTimeout(this.timer2);
	    next();
	  },
};
</script>

<style scoped>
canvas {
  cursor: crosshair;
}
.header{
	padding:0 40px;
	height:48px;
	padding:0 24px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	color:#fff;
	background:#2379F6;
	font-size:16px;
}
.header h3{
	font-weight: normal;
	font-size:16px;
}
.header p{
	display: flex;
}
.header p b{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 134px;
	height: 32px;
	background: rgba(255,255,255,0.1);
	border-radius: 17px;
	border: 1px solid #FFFFFF;
	text-align: center;
	line-height:32px;
	cursor: pointer;
	margin-right:14px;
}
.header p b img{
	width:16px;
	margin-right:8px;
}
.header p em{
	display: inline-block;
	width: 76px;
	height: 32px;
	background: #FFFFFF;
	border-radius: 17px;
	border: 1px solid #FFFFFF;
	color:#2379F6;
	text-align: center;
	line-height:32px;
	cursor:pointer
}
.tabNav{
	min-width:100%;padding:0 40px;
	height:54px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding:0 24px 0 10px;
	background:#fff;
}
.tabNav ul{
	display: flex;
	align-items: center;
	font-size:14px;
}
.tabNav ul li{
	padding:0 20px;
	cursor: pointer;
	line-height:38px;
	color:#557292;
	position:relative
}
.tabNav ul li:hover,.tabNav ul li.hover{
	color:#2A303B;
}
.tabNav ul li:hover::after,.tabNav ul li.hover::after{
	content:'';
	width: 24px;
	height: 4px;
	background: #295CFF;
	border-radius: 2px;
	position:absolute;
	left:50%;
	transform: translateX(-50%);
	bottom:0
}
.tabNav span{
	display: inline-block;
	width: 140px;
	height: 34px;
	background: #F2F6FB;
	border-radius: 10px;
	border: 1px solid #295CFF;
	font-weight: 500;
	font-size: 14px;
	color: #295CFF;
	text-align: center;
	line-height:34px;
	cursor: pointer;
}
/* 上传 */
.uploadMarks{
	box-sizing: border-box;
	background:#F4F7FD;
	width:100vw;
	height:calc(100vh - 49px);
	position: relative;
}
.smcsbutton{
	width: 124px;
	height: 34px;
	background: #2379F6;
	border-radius: 10px;
	font-size: 14px;
	color: #FFFFFF;
	text-align: center;
	border:none;
	/* margin:24px 0 0 24px; */
	position: absolute;
	padding:0;
	left:24px;
	top:24px;
}
.boxcenter{
	display: flex;
	justify-content: space-between;
}
.uploadcardInfo{
	width:80%;
	height:calc(100vh - 49px);
	background:#fff;
	position:relative;
	box-shadow: 0 4px 16px 0 #5572921a;
	overflow: auto;
	position:relative;
}
.examboxbutton{
	width:100%;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	padding:0 15px;
	height: 54px;
	background: #E8F0FA;
	position:absolute;
	left:0;
	bottom:0;
}
.examboxbutton >>>  .el-button{
	width: 124px;
	height: 34px;
	border-radius:10px;
	padding:0;
	margin:0;
	font-size:12px;
	border: 1px solid #295CFF;
	color:#295CFF;
	background:none;
}
.examboxbutton >>>  .el-button:first-child{
	background:#295CFF;
	border: 1px solid #295CFF;
	color:#fff;
}
.examboxbutton >>>  .el-button:nth-child(2){
	margin:0 8px;
}
.examboxbutton1{
	width:100%;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	padding:0 15px;
	height: 54px;
	background: #E8F0FA;
	position:absolute;
	left:0;
	bottom:0;
	justify-content: center;
}
.examboxbutton1 >>>  .el-button{
	width: 124px;
	height: 34px;
	border-radius:10px;
	padding:0;
	margin:0;
	font-size:12px;
	border: 1px solid #295CFF;
	color:#295CFF;
	background:none;
}
.examboxbutton1 >>>  .el-button:first-child{
	background:#295CFF;
	border: 1px solid #295CFF;
	color:#fff;
}
.examboxbutton1 >>>  .el-button:nth-child(2){
	margin:0 8px;
}
.qtbuttonset{
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top:14px;
}
.qtbuttonset em{
	width: 124px;
	height: 34px;
	background: #295CFF;
	border-radius: 10px;
	font-size:14px;
	color:#fff;
	text-align: center;
	line-height: 34px;
	margin:8px;
}
.qtbuttonset em:last-child{
	width: 124px;
	height: 34px;
	background: #F2F6FB;
	border-radius: 10px;
	border: 1px solid #295CFF;
	color:#295CFF;
}
.uploadcardInfo h3{
	line-height:67px;
	border-bottom:solid 1px #D8E4F0;
	padding:0 24px;
	color:#2A303B;
	font-weight:normal
}
.uploadcardInfo ul li{
	display: flex;
	align-items: center;
	color:#8E96A4;
	font-size:16px;
	padding:0 24px;
	margin-top:24px;
}
.uploadcardInfo ul li span{
	color:#8E96A4;
	width:100px;
}
.uploadcardInfo ul li >>> .el-input__inner{
	border-radius:10px;
}
.uploadcardInfo ul li >>> .el-textarea{
	width:calc(100% - 100px)
}
.uploadCardimage{
	width:calc(100% - 460px);
	height:calc(100vh - 49px);
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}
.uploadCardimage span{
	display: block;
	width:100%;
	text-align: center;
}
.uploaddiv{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.uploaddivattention{
	font-size: 14px;
	color: #B3B8C2;
}
.cropperBox{
	height:calc(100vh - 49px);
	display: flex;
}
.cropperImageset{
	width:calc(100% - 370px);
	height:calc(100vh - 49px);
	overflow:auto;
	position: relative
}
.routate{
  	position:absolute;
  	left:50px;
  	top:5px;
  	background:#fff;
  	height:60px;
  	display: flex;
  	align-items: center;
  	padding:0 10px 0 0;
  	box-shadow: 0 0 5px rgba(0,0,0,0.1);
  	border-radius:5px;
  	font-size:14px;
  	color:#557292;
  	border-radius: 10px;
	z-index:10
  }
 .routate >>> .el-select,.routate >>>.el-input{
  	width:150px;
  }
 .routate >>> .el-select{
  	margin-right:10px;
  }
  .routate >>>.el-input{
  	margin-left:10px;
  	margin-right:10px;
  }
 .routate >>> .el-button{
  	border-radius:10px;
  	height:35px;
  	width:55px;
  	padding:0 ;
	margin-left:10px
  }
  .routate >>> .el-input__inner{
  	border-radius:10px;
  	height:35px;
  }
  .breadBox >>> .el-breadcrumb__inner a,.breadBox >>> .el-breadcrumb__inner.is-link{
  	font-weight:normal
  }
  .breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner,
  .breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner a,
  .breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover,
  .breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner:hover{
  	font-weight:bold
  }
  .routerlistbox{
  	  width: 224px;
  	  height: 30px;
  	  background: #295cff0f;
  	  border: 1px solid #FFFFFF;
  	  border-radius: 4px;
  	  display: flex;
  	  align-items: center
  }
  .routerlistbox a{
  	  flex:1;
  	  height:30px;
  	  line-height:30px;
  	  text-align: center;
  	  font-size:14px;
  	  color:#fff;
  }
   .routerlistbox a.hover{
  	   background:#fff;
  	   color:#2379F6
   }
   .cardczpk{
   	  box-sizing: border-box;
   	  width: 174px;
   	  height: 90px;
   	  background: #FFFFFF;
   	  box-shadow: 0 4px 16px 0 #5572921a;
   	  border-radius: 10px;
   	  position:fixed;
   	  left:24px;
   	  top:72px;
   	  padding:14px;
   }
   .cardczpk span{
   	  font-size:14px;
   	  color:#2A303B;
   }
   .cardczpk div{
   	  display: flex;
   	  align-items: center;
   }
   .cardczpk div i,.cardczpk div b{
   	  box-sizing: border-box;
   	  font-style: normal;
   	  width: 66px;
   	  height: 34px;
   	  background: #295cff1a;
   	  border: 1px solid #295cff1a;
   	  border-radius: 10px;
   	  font-size:14px;
   	  color:#295CFF;
   	  line-height:34px;
   	  padding-left:10px;
   	  cursor: pointer;
   	  margin-top:5px;
   }
   .cardczpk div i{
   	  background:url(../../assets/image/school/roate.png) no-repeat 43px center;
   	  background-size:13px 14px
   }
   .cardczpk div b{
   	  margin-left:14px;
   	  background:url(../../assets/image/school/px.png) no-repeat 43px center;
   	  background-size:13px 14px
   }
   .yclbtitleLeft{
	   display: flex;
	   align-items: center;
	   padding:14px 15px;
   }
   .yclbtitleLeft >>> .el-color-picker__icon, .yclbtitleLeft >>> .el-input, .yclbtitleLeft >>> .el-textarea{
	   width:auto;
   }
   .yclbtitleLeft >>> .el-input__inner{
		width: 126px;
		height: 34px;
		border: 1px solid #D8E4F0;
		border-radius: 10px;
		color:#2A303B;
		font-size:14px;
		margin-right:15px;
   }
   .yclbtitleLeft >>> .el-button{
		width:80px;
		height: 34px;
		background: #295CFF;
		border-radius: 10px;
		border:none;
		line-height:34px;
		color:#fff;
		padding:0 20px
   }
   .yclbtitleRight{
		display: flex;
		padding:15px 15px 0;
   }
   .yclbtitleRight >>> .el-button{
		width: 80px;
		height: 34px;
		background: #295CFF;
		border-radius: 10px;
		border:none;
		line-height:34px;
		color:#fff;
		padding:0
   }
   .yclbtitleRight >>> .el-button:nth-child(2){
		background:#EC555A;
   }
   .custom-table {
     width: 100%;
     border: 1px solid rgba(216,228,240,0.34);
     border-radius:10px;
     border-right: none;
     border-bottom:none;
   }
   
   /* 自定义表格内部元素的样式 */
   .custom-table >>> .el-table{
   	border-collapse: collapse; /* 关闭默认的边框合并模式 */
   	  border-spacing: 0 !important; /* 强制重置间距 */
   }
   .custom-table >>> .el-table__header-wrapper th {
     background-color: #E8F0FA;
     height:42px;
     padding:0;
     text-align: center;
     font-weight:normal
   }
   .custom-table >>> .el-table__row td {
     height:42px;
     padding:0;
     text-align: center;
     border-bottom:solid 1px rgba(216,228,240,0.34);
     border-right:solid 1px rgba(216,228,240,0.34);
     border-collapse: collapse; /* 关闭默认的边框合并模式 */
       border-spacing: 0 !important; /* 强制重置间距 */
   }
   .custom-table >>> .el-table__row td b{
   	display:block;
   	height:36px;
   	width:97%;
   	text-align: center;
   	font-size:14px;
   	line-height:36px;
   	color:#2A303B;
   }
   .custom-table >>> .el-table__row td b.hover{
   	border: 1px solid #EC555A;
   	cursor: pointer;
   }
   .boxihover{
   	border: 1px solid #EC555A;
   	cursor: pointer;
   }
   .custom-table >>> .el-input{
   	height:35px;
   }
   .custom-table >>> .el-input__inner{
   	background:rgba(236,85,90,0.2); ;
   	padding:0;
   	text-align: center;
   	border:none;
   	height:36px;
   	width:101%
   }
   .el-table .warning-row {
       background: #ffffff;
    }
   .el-table .success-row {
       background: #D8E4F0;
   }
   .el-table .cell{
   	padding:0 !important;
   }
   .custom-table >>> .el-table__row td div.cell{
   	padding:0 !important;
   }
    .custom-table >>>  .el-table__body tr.current-row > td {
     background-color: rgb(233, 238, 255) !important; /* 自定义背景颜色 */
   }
   .pagesetfixed{
	   position:fixed;
	   left:25px;
	   bottom:25px;
	   display: flex;
	   align-items: center;
	   width:auto;
	   height: 43px;
	   border-radius: 5px;
	   background: #FFFFFF;
	   box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.3); 
	   padding-left:10px;
   }
   .pagesetfixed li{
	  width: 25px;
	  height: 25px;
	  border-radius: 3px;
	  opacity: 1;
	  /* Brand 品牌/Brand1-Light */
	  background: #F2F3FF;
	  line-height:25px;
	  font-size: 14px;
	  color:#366EF4;
	  text-align: center;
	  margin-right:10px;
	  cursor: pointer;
   }
   .pagesetfixed li.hover{
	   background:#366EF4;
	   color:#fff;
   }
   .uploadcadContent{
   	   position:fixed;
   	   width:100%;
   	   height:100%;
   	   background:rgba(0,0,0,0.7);
   	   left:0;
   	   top:0;
   	   z-index: 10;
     }
     .uploadcad{
   	  background: #FFFFFF;
   	  box-shadow: 0 4px 16px 0 #5572921a;
   	  border-radius: 10px;
   	  padding:25px 0 25px 25px;
   	  position:fixed;
   	  left:50%;
   	  top:50%;
   	  transform: translate(-50%,-50%);
	  width:690px;
     }
     .uploadcad ul{
   	  display: flex;
   	  align-items: center;
   	  flex-wrap: wrap;
     }
     .uploadcad ul li{
   	  width: 200px;
   	  height: 140px;
   	  background: #33333d;
   	  margin-right:25px;
   	  position:relative
     }
     .uploadcad ul li img{
   	  width:100%;
   	  border: 1px solid #295cff80;
     }
     .uploadcad ul li div{
   	  font-size:12px;
   	  text-align: center;
     }
     .uploadcad ul li div span{
   	  padding-top:12px;
   	  color:#295CFF;
   	  cursor:pointer;
     }
     .uploadcad h3{
   	  font-weight:normal;
   	  font-size:18px;
   	  margin-bottom:15px;
     }
     .uploadcad ul li p{
   	  width:100%;
   	  height:100%;
   	  position:absolute;
   	  left:0;
   	  top:0;
   	  background:rgba(0,0,0,0.3);
   	  display: flex;
   	  align-items: center;
   	  justify-content: center;
     }
     .uploadcad ul li em{
   	  width: 52px;
   	  height: 24px;
   	  background: #ffffff;
   	  border-radius: 12px;
   	  font-size: 16px;
   	  color: #295CFF;
   	  text-align: justify;
   	  line-height:24px;
   	  text-align: center;
   	  font-style:normal;
   	  cursor: pointer;
     }
     .buttonreupload{
   	  margin-top:50px;
     }
     .buttonreupload button,.buttonreupload b{
   	  display: inline-block;
   	 width: 124px;
   	 height: 34px;
   	 border-radius: 10px; 
   	 border: 1px solid #295CFF;
   	 text-align: center;
   	 line-height:34px;
   	 font-size:14px;
   	 cursor: pointer;
     }
     .buttonreupload button{
   	  background: #295CFF;
   	  color:#fff;
   	  margin-right:24px;
     }
     .buttonreupload b{
   	  color:#295CFF;
   	  background: #F2F6FB;
     }
	 .boxsetdelecte{
	 	position:relative;
	 }
	 .boxsetdelecte span{
	 	position:absolute;
	 	left:-11px;
	 	top:24px;
	 }
	 .buttonboxedit{
	   	display: flex;
	   	align-items: center;
	   	justify-content: center;
	   	padding-top:5px;
	 	width:200px;
	 	height:86%;
	 	background:rgba(0,0,0,0.5);
	 	position:absolute;
	 	left:-12px;
	 	top:35px;
		flex-wrap: wrap;
	   }
	   .buttonboxedit i{
	   	width: 52px;
	   	height: 24px;
	   	background: #fff;
	   	border-radius: 12px;
	   	font-size: 16px;
	   	color: #295CFF;
	   	text-align: justify;
	   	line-height:24px;
	   	text-align: center;
	   	font-style:normal;
	   	cursor: pointer;
	   }
	   .boxsetdelecte b{
	   	display: block;
	   	text-align: center;
	   	font-size:20px;
	   	padding-bottom:6px;
	   }
	 .imgmove span{
	 	display: flex;
	 	align-items: center;
		flex-wrap: wrap;
	 }
	 .imgmove span div{
	 	margin:0 11px;
	 }
	 .addExamMain{
	 	position: fixed;
	 	width:100%;
	 	height:100%;
	 	background:rgba(0,0,0,0.5);
	 	left:0;
	 	top:0;
	 	z-index:100;
	 }
	 .addExamContent{
	 	width: 584px;
	 	height: auto;
	 	background: #FFFFFF;
	 	box-shadow: 0px 4px 16px 0px rgba(85,114,146,0.1);
	 	border-radius: 10px;
	 	position: fixed;
	 	left:50%;
	 	top:50%;
	 	transform: translate(-50%,-50%);
	 	z-index:2;
	 	box-sizing: border-box;
	 	padding:30px;
	 }
	 .addExamContent h3{
	 	font-size:18px;
	 	padding-bottom:10px;
	 }
	 .addExamContent p{
		 color:red;
		 font-size:14px;
	 }
	 .sbcontentbsl{
		 display: flex;
		 align-items: center;
		 padding:20px 0;
		 color:#333;
		 font-size:14px;
	 }
	 .sbcontentbsl >>> .el-checkbox{
		 color:#333;
	 }
	 .sbcontentbsl span{
		 width:200px;
		 height:35px;
		 background: #F7F8FA;
		 border-radius:4px;
		 padding-left:15px;
		 font-size:14px;
		 color:#86909C;
		 line-height:35px;
		 margin-left:15px;
	 }
	 .sbjdprogreen{
		 font-size:14px;
	 }
	 .groupbutton{
	 	display: flex;
	 	align-items: center;
	 	padding-top:20px;
	 }
	 .groupbutton >>> .el-button{
	 	width: 124px;
	 	height: 34px;
	 	background: #295CFF;
	 	border-radius: 10px;
	 	font-size: 14px;
	 	color: #FFFFFF;
	 	padding:0;
	 }
	 .groupbutton >>> .el-button:last-child{
	 	background: #F2F6FB;
	 	border-radius: 10px;
	 	border: 1px solid #295CFF;
	 	color:#295CFF;
	 	margin-left:24px;
	 }
</style>